<template>
  <div p20 flex flex-wrap>
    <div ref="chart1Ref" flex-1 p10></div>
    <div ref="chart2Ref" flex-1 p10></div>
  </div>
</template>

<script setup>
import ECharts from '@/plugin/echarts/index.js'
import { onMounted, ref } from 'vue'
let chart1Ref = ref(null)
let chart2Ref = ref(null)
let myChart1 = ref()
let myChart2 = ref()
let chartOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
    },
  ],
}

onMounted(() => {
  myChart1.value = ECharts.init(chart1Ref.value)
  myChart2.value = ECharts.init(chart2Ref.value)
  myChart1.value && myChart1.value.setOption(chartOption)
  myChart2.value && myChart2.value.setOption(chartOption)
})
</script>

<style scoped></style>
